<script setup>
import { onMounted, ref } from 'vue'
import { dataBusinessAnalysis } from '@/apis/apis.js'

const data = ref([])

const getData = async () => {
  const res = await dataBusinessAnalysis()
  data.value = res.data
}

onMounted(async () => {
  await getData()
})
</script>

<template>
<div class="container">
  <div class="title">实时经营概况</div>
  <div class="content">
    <span class="item" v-for="item in data" :key="item.name">{{ item.name }}：{{ item.total }}</span>
  </div>
</div>
</template>

<style scoped lang="scss">
.container {
  .title {
    margin-bottom: 15px;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-right: 15px;
      margin-bottom: 15px;
      padding: 15px 0;
      width: 24%;
      background-color: #eff4fb;
      text-align: center;
    }
  }
}
</style>
